<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>接口详情</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.blockUI.js"></script>
</head>
<body style="margin:0px;padding:0px;border:0px;">
<div style="width:100%;border-bottom:2px solid #000080;margin:0px;padding:0px;">
    <table style="width:100%;height:50px;">
        <tr>
            <td style="width:50%;text-align:left;padding-left:50px;">
                <image src="open_api.png" style="width:40px;height:40px;margin: 0 auto;vertical-align:middle;"/>
                <span style="font-size:20px;font-weight:bold;padding-left:10px;">API开放平台</span>
            </td>
            <td style="width:50%;text-align:right;font-size:14px;padding-right:10px;">
                <span>登录 | 注册</span>
            </td>
        </tr>
    </table>
</div>
<div id="container" style="width:100%;background:#F5F5F5;border:0px solid blue;padding:0px;margin:0 auto;">
    <!--接口概述-->
    <div style="width:80%;margin:0 auto;padding-top:30px;">
        <div style="width:100%;background:white;border-radius:3px;padding:5px;padding-left:20px;">
            <div style="width:90%;border-bottom: 1px solid #cad9ea;font-size: 16px;
				font-weight: bold;height: 50px;line-height: 50px;">
                <div style="width:100px;border-bottom:2px solid #4169E1;padding-left:10px;color:#4169E1;">接口概述</div>
            </div>
            <div>
                <h5>1、接口名称：</h5>&nbsp;&nbsp;&nbsp;&nbsp; ${apiDocumentBean.interfaceName}
            </div>

            <div>
                <h5>2、功能描述：</h5> &nbsp;&nbsp;&nbsp;&nbsp; ${apiDocumentBean.interfaceDesc}
            </div>
            <div>
                <h5>3、请求URI：</h5> &nbsp;&nbsp;&nbsp;&nbsp; ${apiDocumentBean.requestUrl}
            </div>
            <div>
                <h5>4、请求方式：</h5> &nbsp;&nbsp;&nbsp;&nbsp; ${apiDocumentBean.requestType}
            </div>
        </div>
    </div>
    <!--接口参数信息-->
    <div style="width:80%;margin:0 auto;padding-top:30px;">
        <div style="width:100%;background:white;border-radius:3px;padding:5px;padding-left:20px;">
            <div style="width:90%;border-bottom: 1px solid #cad9ea;font-size: 16px;
				font-weight: bold;height: 50px;line-height: 50px;">
                <div id="apiDetailButton" style="padding-left: 10px;" class="apiDetailActiveTab"
                     onclick="changeTab('apiDetailParamDiv')">
                    接口详情
                </div>
                <div style="width: 30px;float: left;text-align: center;">
                    |
                </div>
                <div id="apiCallTestButton" class="apiDetailNoActiveTab" onclick="changeTab('apiCallTestDiv')">
                    接口测试
                </div>
                <div style="width: 30px;float: left;text-align: center;">
                    |
                </div>
                <div id="apiCallTestButton" class="apiDetailNoActiveTab" onclick="changeTab('apiCallTestDiv')">
                    接入示例
                </div>
            </div>
            <div id="apiDetailParamDiv" class="apiDetailDivActive">
                <div>
                    <h5>请求字段列表：</h5>
                    <table class="dataTable" style="width:700px;">
                        <thead>
                        <tr style="width:100%;font-size: 14px;color: white;
						line-height: 30px;">
                            <th>字段名</th>
                            <th>类型</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <#list apiDocumentBean.requestParams as item>
                            <tr style="font-size: 13px;line-height: 30px;">
                                <td>${item.apiParamName}</td>
                                <td>${item.apiParamType}</td>
                                <td>${item.apiParamDesc}</td>
                            </tr>
                        </#list>
                    </table>
                </div>
                <div>
                    <h5>响应字段列表：</h5>
                    <table class="dataTable" style="width:700px;border: 1px solid #e6e6e6;">
                        <thead>
                        <tr style="width:100%;font-size: 14px;color: white;line-height: 30px;">
                            <th>
                                字段名
                            </td>
                            <th>
                                类型
                            </td>
                            <th>
                                说明
                            </td>
                        </tr>
                        </thead>
                        <#list apiDocumentBean.responseTypes as item>
                            <tr style="font-size: 13px;border: 0px solid #e6e6e6;line-height: 30px;">
                                <td>${item.apiResultName}</td>
                                <td>${item.apiResultType}</td>
                                <td>${item.apiResultDesc}</td>
                            </tr>
                        </#list>
                    </table>
                </div>
            </div>
            <!-- 测试接口div -->
            <div id="apiCallTestDiv" class="apiDetailDivNoActive">
                <div>
                    <h5>请求字段列表：</h5>
                    <table class="dataTable" style="width:700px;">
                        <thead>
                        <tr style="width:100%;font-size: 14px;color: white;
						line-height: 30px;">
                            <th>字段名</th>
                            <th>类型</th>
                            <th>说明</th>
                            <th>请求值</th>
                        </tr>
                        </thead>
                        <#list apiDocumentBean.requestParams as item>
                            <tr style="font-size: 13px;line-height: 30px;">
                                <td>${item.apiParamName}</td>
                                <td>${item.apiParamType}</td>
                                <td>${item.apiParamDesc}</td>
                                <td><input name="${item.apiParamName}" type="text" value=""/></td>
                            </tr>
                        </#list>
                    </table>
                </div>
                <div style="height: 50px; margin-top: 10px;">
                    <button class="buttonCls" onclick="submitTest('${apiId}')" style="font-size:14px;font-weight:bold;
					border-radius:5px;
						border-color:#4169E1;cursor:pointer;background:#4169E1;color:white;
						height:40px;line-height:35px;width: 150px;">
                        提交请求
                    </button>
                </div>
                <div>
                    <h5>响应字段列表：</h5>
                    <table id="testDataTable" class="dataTable" style="width:700px;border: 1px solid #e6e6e6;">
                        <thead>
                        <tr style="width:100%;font-size: 14px;color: white;line-height: 30px;">
                            <th>
                                字段名
                            </td>
                            <th>
                                类型
                            </td>
                            <th>
                                说明
                            </td>
                            <th>
                                返回值
                            </td>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top:20px;">
        &nbsp;&nbsp;
    </div>
</div>
<style>
    .apiDetailActiveTab {
        width: 80px;
        border-bottom: 2px solid #4169E1;
        color: #4169E1;
        float: left;
        cursor: pointer;
    }

    .apiDetailNoActiveTab {
        width: 80px;
        float: left;
        cursor: pointer;
    }

    .apiDetailDivActive {
        display: block;
    }

    .apiDetailDivNoActive {
        display: none;
    }

    .buttonCls:hover {
        background-color: red;
    }

    .dataTable {
        border-collapse: collapse;
    }

    .dataTable td, table th {
        border: 1px solid #cad9ea;
        color: black;
        height: 30px;
    }

    .dataTable th {
        background-color: #CCE8EB;
        text-align: left;
    }

    .dataTable tr:nth-child(odd) {
        background: #fff;
    }

    .dataTable tr:nth-child(even) {
        background: #F5FAFA;
    }
</style>
<script>
    function showApiDetail(apiId) {
        window.location.href = "api_detail_info.html";
    }

    function changeTab(div) {
        if (div == "apiDetailParamDiv") {
            document.getElementById("apiDetailParamDiv").style.display = "block";
            document.getElementById("apiDetailButton").classList.add("apiDetailActiveTab");
            document.getElementById("apiDetailButton").classList.remove("apiDetailNoActiveTab");
            document.getElementById("apiCallTestDiv").style.display = "none";
            document.getElementById("apiCallTestButton").classList.add("apiDetailNoActiveTab");
            document.getElementById("apiCallTestButton").classList.remove("apiDetailActiveTab");
        } else if (div == "apiCallTestDiv") {
            document.getElementById("apiDetailParamDiv").style.display = "none";
            document.getElementById("apiDetailButton").classList.add("apiDetailNoActiveTab");
            document.getElementById("apiDetailButton").classList.remove("apiDetailActiveTab");
            document.getElementById("apiCallTestDiv").style.display = "block";
            document.getElementById("apiCallTestButton").classList.add("apiDetailActiveTab");
            document.getElementById("apiCallTestButton").classList.remove("apiDetailNoActiveTab");
        }
    }

    jQuery(function () {

    });

    function submitTest(apiId) {
        $('body').block({
            message: '<h3>正在查询，请稍候……</h3>',
            css: {
                top:  ($(window).height() - 400) /2 + 'px',
                left: ($(window).width() - 400) /2 + 'px',
                border: '3px solid khaki'
            }
        });
        // alert(apiId);
        // 拼装json串
        var jsonObj = {};
        jsonObj.apiId = apiId;
        $("input").each(function (i) {
            var id = $(this).attr("name");
            jsonObj[id] = $(this).val();
        });
        var requestJsonData = JSON.stringify(jsonObj);
        // alert(requestJsonData);
        // 请求后端
        $.ajax({
            url: '/request',
            type: 'post',
            data: requestJsonData,
            dataType: 'json',
            contentType: "application/json",
            success: function (result) {
                // alert(result.responseFieldVos);
                var trList = $("#testDataTable").find('tbody').find("tr");
                $.each(trList, function (index, item) {
                    $(item).remove();
                });
                $.each(result.responseFieldVos, function (index, item) {
                    // alert(index + "->" + item.resultName + "->" + item.resultValue);
                    var $tr = $("<tr style=\"font-size: 13px;border: 0px solid #e6e6e6;line-height: 30px;\">" +
                        "<td>" + item.resultName + "</td>" +
                        "<td>" + item.resultType + "</td>" +
                        "<td>" + item.resultDesc + "</td>" +
                        "<td>" + item.resultValue + "</td>"
                        + "</tr>");
                    $("#testDataTable").find('tbody').append($tr);
                });
                $.unblockUI();
            },
            fail: function (e) {
                alert("发生错误：" + e);
                $.unblockUI();
            },
            error: function (e) {
                alert("发生异常：" + e);
                $.unblockUI();
            },
            complete: function (e) {
                //....
            }
        });
    }
</script>
</body>
</html>